<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- <style>
  #app {
    width: 600px;
    height: 600px;
    background-color: aquamarine;
    margin: auto;
    margin-top: 100px;
  }

  #app input {
    margin-top: 20px;
  }

  table {
    border-collapse: collapse;
  }

  th,
  td {
    width: 100px;
    height: 30px;
    text-align: center;
  }
</style>
<div id="app">
  用户名:<input type="text" v-model="username"><br>
  密码:<input type="text" v-model="password"><br>
  确认密码:<input type="text" v-model="password2"><br>
  昵称:<input type="text" v-model="nickname"><br>
  性别:<input type="radio" value="男" v-model="sex">男
  <input type="radio" value="女" v-model="sex">女<br>
  所属城市:<select v-model="city">
    <option value="1">1</option>
  </select>
  <select v-model="city">
    <option value="2">1</option>
  </select>
  <select v-model="city">
    <option value="3">1</option>
  </select><br>
  兴趣爱好：<input type="checkbox" value="爬山" v-model="hobby">爬山
  <input type="checkbox" value="旅游" v-model="hobby">旅游
  <input type="checkbox" value="看书" v-model="hobby">看书
  <input type="checkbox" value="看星星" v-model="hobby">看星星<br>
  <button @click="ti">提交</button>
  <table border="1">
    <thead>
      <tr>
        <th>用户名</th>
        <th>密码</th>
        <th>昵称</th>
        <th>性别</th>
        <th>所属城市</th>
        <th>兴趣爱好:</th>
      </tr>
    </thead>
    <tbody v-show="show">
      <tr>
        <td>{{username}}</td>
        <td>{{password}}</td>
        <td>{{nickname}}</td>
        <td>{{sex}}</td>
        <td>{{city}}</td>
        <td>{{hobby}}</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: '',
      nickname: '',
      sex: '',
      city: '',
      hobby: [],
      password2: '',
      show: false,
      cityData: [{
        name: "河北省",
        city: [{
          name: "石家庄市",
          districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
        }, {
          name: "张家口市",
          districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
        }, {
          name: "承德市",
          districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
        }, {
          name: "秦皇岛市",
          districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
        }]
      }, {
        name: "山西省",
        city: [{
          name: "太原市",
          districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
        }, {
          name: "朔州市",
          districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
        }, {
          name: "大同市",
          districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
        }, {
          name: "阳泉市",
          districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
        }]
      }]
    },
    //点击事件
    methods: {
      ti() {
        // console.log(this.username, this.password, this.nickname, this.sex, this.city, this.hobby, this.password2);
        if (this.password != this.password2) {
          alert('两次密码不一致')
        } else {
          this.show = true;
        }
      },
    },
  })
</script> -->





<style>
  #app {
    width: 300px;
    height: 500px;
    margin: auto;
    margin-top: 150px;
    background-color: rgb(111, 255, 255);
  }

  table {
    border-collapse: collapse;
  }

  th,
  td {
    width: 100px;
    height: 30px;
    text-align: center;
  }
</style>
<div id="app">
  学生:<input type="text" v-model.number="val1"><br>
  数学:<input type="text" v-model.number="val2"><br>
  语文:<input type="text" v-model.number="val3"><br>
  英语:<input type="text" v-model.number="val4"><br>
  <button @click="add()">添加</button>
  <table border="1">
    <thead>
      <tr>
        <th>学生</th>
        <th>数学</th>
        <th>语文</th>
        <th>英语</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in arr" :key="index">
        <td>{{item.name}}</td>
        <td>{{item.Maths}}</td>
        <td>{{item.Language}}</td>
        <td>{{item.English}}</td>
        <td><button @click="del(index)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <button @click="jige()">button 1</button>
  <button @click="sor()">正序</button>
  <button @click="sors()">倒序</button><br>
  <span>总分:{{str}}</span><br>
  <span>平均分:{{avg | format}}</span>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      arr: [{
        id: 0,
        name: '张三',
        Maths: 90,
        Language: 100,
        English: 75,
      }, {
        id: 1,
        name: '李四',
        Maths: 80,
        Language: 105,
        English: 85,
      }, {
        id: 2,
        name: '王五',
        Maths: 40,
        Language: 80,
        English: 100,
      }],
      val1: '',
      val2: '',
      val3: '',
      val4: '',
    },
    //点击事件
    methods: {
      del(index) {
        this.arr.splice(index, 1);
      },
      jige() {
        this.arr.forEach(item => {
          if (item.Maths > 60) {
            alert(item.name + '及格');
          } else {
            alert(item.name + '不及格');
          }
        });
      },
      sor() {
        this.arr.sort((a, b) => {
          let num = b.Maths + b.Language + b.English - a.Maths - a.Language - a.English;
          return num;
        });
      },
      sors() {
        this.arr.sort((a, b) => {
          let num = b.Maths - b.Language - b.English - a.Maths - a.Language - a.English;
          return num;
        });
      },
      add() {
        this.arr.push({
          id: this.arr.length,
          name: this.val1,
          Maths: this.val2,
          Language: this.val3,
          English: this.val4,
        });
      }
    },
    //计算每个学生的总分
    computed: {
      str() {
        var num = 0;
        this.arr.reduce((a, b) => {
          num += b.Maths + b.Language + b.English;
        }, 0);
        return num;
      },
      //计算每个学生的平均分
      avg() {
        var num = 0;
        this.arr.reduce((a, b) => {
          num += b.Maths + b.Language + b.English;
        }, 0);
        return num / this.arr.length;
      },
    },
    //过滤器
    filters: {
      format(avg) {
        return avg.toFixed(2);
      }
    },
  })

</script>